<template>
  <div class="barrages-drop">
    ============================39、vue-baberrage组件的学习和使用 ============================
    <!--
    is-show 表示是否显示，默认为true
    barrage-list 表示弹幕列表
    max-word-count 表示最大字数，默认为 60
    throttle-gap 表示消息之间的间隔时间，默认为2000毫秒
    loop 表示是否循环，默认为 false
    box-height 表示盒子的高度，默认为窗体的高度
    message-height 表示信息的高度
    -->
    <vue-baberrage
      :is-show="barrageIsShow"
      :barrage-list="barrageList"
      :max-word-count="maxWordCount"
      :throttle-gap="throttleGap"
      :loop="barrageLoop"
      :box-height="boxHeight"
      :message-height="messageHeight"
    />
    <div>
      <input v-model="value" type="text"><button @click="addToList">添加</button>
    </div>
  </div>
</template>
<script>
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
  name: 'Barrages',
  data () {
    return {
      msg: '测试',
      barrageIsShow: true,
      messageHeight: 3,
      boxHeight: 150,
      barrageLoop: true,
      maxWordCount: 70,
      throttleGap: 3000,
      barrageList: [],
      value: '',
      id: 1
    }
  },
  mounted () {
  },
  methods: {
    addToList () {
      console.log('value:', this.value)
      /*      const list = [
        {
          id: 1,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 3,
          barrageStyle: 'red'
        },
        {
          id: 2,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 8,
          barrageStyle: 'green'
        },
        {
          id: 3,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 10,
          barrageStyle: 'normal'
        },
        {
          id: 4,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 5,
          barrageStyle: 'blue'
        },
        {
          id: 5,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 6,
          barrageStyle: 'red'
        },
        {
          id: 6,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 12,
          barrageStyle: 'normal'
        },
        {
          id: 7,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 5,
          barrageStyle: 'red'
        },
        {
          id: 8,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 5,
          barrageStyle: 'normal'
        },
        {
          id: 9,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 8,
          barrageStyle: 'red'
        },
        {
          id: 10,
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
          msg: this.msg,
          time: 10,
          barrageStyle: 'yellow'
        }
      ]
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle
        })
      }) */

      /*
      * 添加弹幕
      * id 表示当前弹幕的id
      * avatar 当前弹幕图片
      * msg 表示当前弹幕的消息
      * time 表示当前弹幕的执行的时间
      * type 表示弹幕的类型，MESSAGE_TYPE.NORMAL表示从右到左滚动
      * barrageStyle  表示弹幕样式，red为自定义的css 样式
      * */
      this.barrageList.push({
        id: this.id++,
        avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
        msg: this.value,
        time: 10,
        type: MESSAGE_TYPE.NORMAL,
        barrageStyle: 'red'
      })
    }
  }
}
</script>
<style  lang="less">
  .barrages-drop {
    .blue {
      border-radius: 100px;
      background: #e6ff75;
      color: #fff;
    }

    .green {
      border-radius: 100px;
      background: #75ffcd;
      color: #fff;
    }
    .red {
      border-radius: 100px;
      background: #e68fba;
      color: #fff;
    }
    .yellow {
      border-radius: 100px;
      background: #dfc795;
      color: #fff;
    }
    .baberrage-stage {
      position: absolute;
      width: 100%;
      height: 212px;
      overflow: hidden;
      top: 0;
      margin-top: 130px;
    }
  }
</style>
